<style>
    select{
        width: auto !important;
    }
</style>
<p>
    <a href="#" ng-click="setLang('en')">English</a>
    |
    <a href="#" ng-click="setLang('vi')">Vietnamese</a>
</p>


<section ng-controller="createEventController">
    <h1>{{'CREATE_EVENT' | translate}}</h1>
    <form name="createForm" novalidate mi-submit="create()">
        <div class="alert alert-danger" ng-show="isCreateError">
            <span ng-bind="createError"></span>
        </div>
        <span>{{'EVENT_NAME' | translate}}</span>
        <span ng-show="!createForm.name.$invalid && createForm.name.$dirty">
            <i class="fa fa-check-circle-o" style="color:#4cae4c"></i></span>
        <input type="text" id="name" name="name"  ng-model="name" required mi-check-unique-name placeholder="Tên sự kiện"/></td>
        <span class="help-block" ng-show="createForm.name | eventFilter:createForm:'required'">
            {{'ERROR_NAME_NULL' | translate}}
        </span>
        <span class="help-block" ng-show="createForm.name | eventFilter:createForm:'unique'">
            {{'ERROR_NAME_UNIQUE' | translate}}
        </span>
        </br>
        <span>{{'START_TIME' | translate}}</span>
        <select id="date1" ng-options="date for date in default.dates" name="date1"  ng-init="date1 = default.dates[0]" class="form-control" ng-model="date1" mi-check-date>
        <!--<option value="">-- {{'DATE' | translate}} --</option>-->
        </select>
        <select id="month1" ng-options="month for month in default.months" name="month1" ng-init="month1 = default.months[0]" class="form-control" ng-model="month1"  mi-check-date>
        <!--<option value="">-- {{'MONTH' | translate}} --</option>-->
        </select>
        <select id="year1" ng-options="year for year in default.years" name="year1" ng-init="year1 = default.years[0]" class="form-control" ng-model="year1"  mi-check-date>
        <!--<option value="">-- {{'YEAR' | translate}} --</option>-->
        </select>
        <select id="hour1" ng-options="hour for hour in default.hours" name="hour1"  class="form-control" ng-model="hour1"   mi-check-date>
        <option value="">-- {{'HOUR' | translate}} --</option>
        </select>
        <select id="minute1" ng-options="minute for minute in default.minutes" name="minute1"  class="form-control" ng-model="minute1"  mi-check-date>
        <option value="">-- {{'MINUTE' | translate}} --</option>
        </select>
        <select id="step1" ng-options="step for step in default.steps" name="step1" ng-init="step1 = default.steps[0]" class="form-control" ng-model="step1"  mi-check-date>
        <option value="">-- {{'STEP' | translate}} --</option>
        </select>
        <span class="help-block" ng-show="createForm.date1 | eventFilter:createForm:'validStart'">
        {{'ERROR_START_INVALID' | translate}}
        </span>
        </br>

        <span>{{'END_TIME' | translate}}</span>
        <select id="date2" ng-options="date for date in default.dates" name="date2" class="form-control" ng-model="date2" mi-check-date >
        <option value="">-- {{'DATE' | translate}} --</option>
        </select>
        <select id="month2" ng-options="month for month in default.months" name="month2" class="form-control" ng-model="month2" mi-check-date >
        <option value="">-- {{'MONTH' | translate}} --</option>
        </select>
        <select id="year2" ng-options="year for year in default.years" ng-init="year2 = default.years[0]" name="year2" class="form-control" ng-model="year2" mi-check-date >
        <option value="">-- {{'YEAR' | translate}} --</option>
        </select>
        <select id="hour2" ng-options="hour for hour in default.hours" name="hour2" class="form-control" ng-model="hour2" mi-check-date>
        <option value="">-- {{'HOUR' | translate}} --</option>
        </select>
        <select id="minute2" ng-options="minute for minute in default.minutes" name="minute2" class="form-control" ng-model="minute2" mi-check-date >
        <option value="">--{{'MINUTE' | translate}} --</option>
        </select>
        <select id="step2" ng-options="step for step in default.steps" name="step2" ng-init="step2 = default.steps[0]"  class="form-control" ng-model="step2"  mi-check-date>
        <option value="">--{{'STEP' | translate}}--</option>
        </select>
        <span class="help-block" ng-show="createForm.date2 | eventFilter:createForm:'validEnd'">
            {{'ERROR_END_INVALID' | translate}}
        </span>
        </br>

        <span>{{'LOCATION' | translate}}</span>
        <input type="text" id="location" name="location"  ng-model="location"  required/>
        <span class="help-block" ng-show="createForm.location | eventFilter:createForm:'required'">
                    {{'ERROR_LOCATION_NULL' | translate}}
        </span>
        </br>

        <span>{{'DESCRIPTION' | translate}}</span>
        <textarea name="description" ng-model="description"></textarea>
        </br>

        <span>{{'EVENT_PRIVACY' | translate}}</span>
        <input type="radio"  name="privacy"  ng-model ="privacy" value="p"/> {{'PRIVACY' | translate}}
        <input type="radio"  name="privacy"  ng-model ="privacy" value="g"/> {{'GROUP' | translate}}
        <input type="radio" name="privacy" checked ng-model ="privacy"  value="c"/>{{'CLOSE_COMMUNITY' | translate}}
        <input type="radio" name="privacy"  ng-model ="privacy" value="o" /> {{'OPEN_COMMUNITY' | translate}}
        <!--<input  id="privacy-privacy" type="radio" name="privacy"  ng-model ="privacy" value="o" onchange="toggleStatus()"/> {{'OPEN_COMMUNITY' | translate}}-->
        </br>
        <span>{{'EVENT_INVITE' | translate}}</span>
        <input type="text" name="user" id="friend-token"/>
        </br>
        <span>{{'INVITE_RIGHT' | translate}}</span>
        <input type="text" name="invite" id="invite-token"/>
        </br>

        {{'COLOR' | translate}}
        <select name="color" class="form-control" ng-model="color">
        <option value="" ng-model="color">--{{'COLOR' | translate}}--</option>
        <option value="#ff0000" style="background-color: #ff0000" >{{'COLOR_RED' | translate}}</option>
        <option value="#00ff00" style="background-color: #00ff00" >{{'COLOR_GREEN' | translate}}</option>
        <option value="#0000ff" style="background-color: #0000ff" >{{'COLOR_BLUE' | translate}}</option>
        <option value="#ffff00" style="background-color: #ffff00" >{{'COLOR_YELLOW' | translate}}</option>
        <option value="#ffffff" style="background-color: #ffffff" >{{'COLOR_WHITE' | translate}}</option>
        </select>

        </br>
        {{'ALARM' | translate}}
        <input type="checkbox" name="alarm"  ng-model="alarm"/>{{'ALARM' | translate}}
        </br>
        <input type="submit" value="{{'BUTTON_CREATE' | translate}}"/>
    </form>
</section>

<lazy-load src="/lib/skel/event-detail.js"></lazy-load>